<template>
  <div class="search">
    <div class="container">
      <div class="title">首页 > 企业账号> 公司信息</div>
      <div class="message-box">
        <div class="input-list">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" :disabled="disabled" label-width="100px" class="demo-ruleForm from-box">
            <el-form-item class="name" label="公司名称：" prop="companyName">
              <el-input v-model="ruleForm.companyName" maxlength="30" />
            </el-form-item>
            <el-form-item class="credit long" label="公司信用代码：" prop="companyCode">
              <el-input v-model="ruleForm.companyCode" maxlength="18" :disabled="hasCompanyCode"/>
            </el-form-item>
            <el-form-item class="person" label="法人代表：" prop="corporateName">
              <el-input v-model="ruleForm.corporateName" maxlength="30" />
            </el-form-item>
            <el-form-item class="site long" label="公司注册地址：" prop="companyAddress">
              <el-input v-model="ruleForm.companyAddress" maxlength="50" />
            </el-form-item>
          </el-form>
          <div v-if="auditStatus === 3" class="reminder word-break">温馨提示：您当前已成为阿奇数商户，若您想修改企业信息，则可登录商家后台进行修改哦</div>
          <div v-else-if="auditStatus === 1" class="reminder word-break">温馨提示：您当前销售商待审核中，请等平台操作完后再来修改企业信息</div>
          <div class="btn">
            <button class="back" @click="goBack">返回</button>
            <button v-if="!disabled" class="commit" @click="submitReport ">提交审核</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCompanyInfo, getAuditStatus, applyModifyCompanyInfo } from '@/api/account-info/business'
import { creditCodeReg } from '@/js/regex'
import { checkCompanyName, checkCompanyCode } from '@/api/company'
export default {
  components: {},
  data() {
    return {
      ruleForm: {
        companyName: '',
        companyCode: '',
        corporateName: '',
        companyAddress: ''
      },
      rules: {
        companyName: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error(`请输入公司名称`))
                return
              }
              if (value.length > 50) {
                callback(new Error(`公司名称不能超过40位`))
                return
              }
              if (this.auditStatus === 3) {
                return
              }
              checkCompanyName(value).then(response => {
                if (!response.data) {
                  callback(new Error(`"${value}" 已被占用`))
                } else {
                  callback()
                }
              })
            }, trigger: 'blur'
          }
        ],
        companyCode: [
          {
            required: true, validator: (rule, value, callback) => {
              if (!value) {
                callback(new Error(`请输入公司信用代码`))
                return
              }
              if (value.length > 18) {
                callback(new Error(`公司信用代码不能超过18位`))
                return
              }
              if (!creditCodeReg.test(value)) {
                callback(new Error(`公司信用代码格式不正确`))
                return
              }
              if (this.auditStatus === 3) {
                return
              }
              checkCompanyCode(value).then(response => {
                if (!response.data) {
                  callback(new Error(`"${value}" 已被占用`))
                } else {
                  callback()
                }
              })
            }, trigger: 'blur'
          }
        ],
        corporateName: [
          { required: true, message: '请输入公司法人代表', trigger: 'blur' },
          { max: 20, message: '公司法人代表不能超过20位', trigger: 'blur' }
        ],
        companyAddress: [
          { required: true, message: '请输入公司注册地址', trigger: 'blur' },
          { max: 50, message: '公司注册地址不能超过50位', trigger: 'blur' }
        ]
      },
      oldCompanyInfo: {},
      auditStatus: 0,
      applyStatus: undefined,
      disabled: false,
      hasCompanyCode: false // 是否已经填写过企业信用代码
    }
  },
  created() {
    this.getInfo()
    this.getStatus()
  },
  methods: {
    // 获取公司信息
    getInfo() {
      getCompanyInfo().then(response => {
        if (response.data) {
          this.ruleForm = response.data
          this.oldCompanyInfo = JSON.parse(JSON.stringify(response.data))
          if (this.ruleForm.companyCode) {
            this.hasCompanyCode = true
          }
        }
      })
    },
    // 查询用户是否成为商户
    getStatus() {
      getAuditStatus().then(response => {
        if (response.data) {
          this.auditStatus = response.data
          if (this.auditStatus === 1 || this.auditStatus === 3) {
            this.disabled = true
          }
        }
      })
    },
    submitReport() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (JSON.stringify(this.ruleForm) === JSON.stringify(this.oldCompanyInfo)) {
            this.$message.error('抱歉，你没有修改公司信息')
            return
          }
          applyModifyCompanyInfo(this.ruleForm).then(response => {
            if (response.data) {
              this.$emit('setStatus', 0)
            } else {
              this.$message.error('系统繁忙，请稍后重试')
            }
          })
        }
      })
    },
    goBack() {
      this.$router.push('/base-info-set')
    }
  }
}
</script>

<style lang='scss' scoped >
.search {
  background: #f5f5f5;
  .container {
    .title{
        color: #707070;
        font-size: 12px;
        margin: 10px 0 ;
    }
    .message-box {
      background: #ffffff;
      .input-list{
          display: flex;
          flex-direction: column;
          align-items: center;
          margin-bottom: 60px;
          padding: 108px 0 165px 0;
          .from-box{
              display: flex;
              flex-direction: column;
              align-items: center;
              .long{
                  width: 400px;
              }
              .name{
                  padding-left: 10px;
              }
              .person{
                  padding-left: 10px;
              }
          }
          .reminder{
              width: 727px;
              padding-left: 285px;
              color: #FF3B30;
              font-size: 13px;
              margin-bottom: 30px;
          }
          .btn{
              padding-left: 76px;
              .back{
                width: 110px;
                height: 37px;
                background: #F5F5F5;
                border: 1px solid #E5E5E5;
                color: #3D3D3D;
                text-align: center;
                line-height: 37px;
                cursor: pointer;
                border-radius: 3px;
                margin-right: 10px;
              }
              .commit{
                width: 110px;
                height: 37px;
                background:#FF3B30;
                //   border: 1px solid #E5E5E5;
                border-radius: 3px;
                color:#ffffff;
                font-size: 16px;
                text-align: center;
                line-height: 37px;
                cursor: pointer;
              }
          }
      }
    }

  }
  /deep/ .input-list{
      .el-input{
          width: 270px;
          height: 35px;
          .el-input__inner{
              height: 35px;
          }
      }
  }
  /deep/ .site{
      .el-form-item__label{
          width: 122px ! important;

      }
      .el-form-item__error{
              padding-left: 22px;
          }
  }
  /deep/ .credit{
      .el-form-item__label{
          width: 122px ! important;
      }
      .el-form-item__error{
              padding-left: 22px;
          }
  }

//   el-form-item__error
}
</style>
